<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		canvas{
			display:block;
			margin:10px 20px;
			border:1px solid red;
		}
	</style>
	<body>
		<canvas width="400" height="400">
			当前版本太低
		</canvas>
		<script>
			var cas=document.querySelector("canvas")
			var ctx=cas.getContext("2d")
			var w=400,h=400;
			// var j=100
			function r(num){
				// console.log(num)
				return Math.random()*num
			}
      // console.log(r(90),'----',r(90)+10)  
            
	function Ball(x,y,color,xSped,ySped){
				this.x=r(1)+60
				this.y=r(2)+60
				this.r=r(40)+10
				this.color="#"+parseInt(Math.random()*0xffffff).toString(16)
                this.xSped=r(3)+2
				this.ySped=r(3)+1
			
			}
			Ball.prototype.show=function(){
				ctx.beginPath()
				ctx.arc(this.x,this.y,this.r,0,Math.PI*2)
				ctx.fillStyle=this.color
				ctx.fill()
			}
		//给个球体分分配
			var ballpush=[]
          for(var i=0;i<50;i++){
			  var ball=new Ball()
			  ballpush.push(ball)
			  ball.show()
		  }
		  //判断球体是否碰壁
		  Ball.prototype.run=function(){
		 if(this.x+this.r>=w||this.x-this.r<=0){
			 this.xSped=-this.xSped
		 }
		 this.x=this.x+this.xSped
		 if(this.y+this.r>=h||this.y-this.r<=0){
		 		this.ySped=-this.ySped
		 }
		 this.y=this.y+this.ySped
		  }
		 // 运动球体
		 console.log(ballpush.length)
		setInterval(function(){			
					 ctx.clearRect(0,0,w,h)	 
					 for(var i=0;i<ballpush.length;i++){
						 ballpush[i].run()
						 ballpush[i].show()  
					 }
		     
		},10)
  
		</script>
	</body>
</html>
